<template><view class="animate__animated animate__fadeInDown uni-radius-lg">
	    <view class="culture-showcase ">
     
      <uni-swiper-dot
        :info="culturalItems"
        :current="current"
        @click="change"
        field="title"
        :mode="mode"
      >
        <swiper class="swiper-box" :autoplay="true" :interval="3000">
          <swiper-item v-for="(item, index) in culturalItems" :key="index">
            <view class="swiper-item">
              <image
                :src="url('culture', index, 'jpeg')"
                mode="aspectFill"
                class="swiper-img "
              ></image>
              <view class="swiper-content">
                <text class="swiper-title">{{ item.title }}</text>
                <text class="swiper-desc">{{ item.description }}</text>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
	</view>
  <view class="culture-container">

	
    <view class="nav-section container my-4">
      <view class="filter-section animate__animated animate__fadeInDown">
        <!-- 主分类 -->
        <uni-segmented-control
          :current="activeCategoryIndex"
          :values="categories.map(cat => cat.label)"
          @clickItem="onCategoryChange"
          styleType="text"
          activeColor="#6c8380"
        />

       

      </view>

      <!-- 内容展示区域 -->
      <view class="content-section uni-my-4">
        <view class="row g-4">
          <view 
            v-for="(item, index) in filteredContent" 
            :key="item.id" 
            class="col-md-6 col-lg-4"
          >
            <uni-card
              :title="item.title"
              :extra="item.region"
              :thumbnail="url('c', item.image, 'jpg')"
              class="culture-card text-danger animate__animated animate__fadeIn"
              :style="{ animationDelay: `${index * 0.1}s` }"
            >
              <text class="card-text">{{ item.description }}</text>
              <view class="meta-info uni-my-7">
                <view><text class="bi bi-calendar3"></text> {{ item.period }}</view>
                <view><text class="bi bi-eye"></text> {{ item.views }}</view>
                <view><text class="bi bi-heart"></text> {{ item.likes }}</view>
              </view>
              <view class="uni-my-2">
                <uni-tag 
                  v-for="tag in item.tags" 
                  :key="tag"
                  :text="tag"
                  type="error"
                  size="small"
                  class="uni-mx-2 "
                />
              </view>
            </uni-card>
          </view>
        </view>
      </view>
    </view>

    <!-- 时间线跳转卡片 -->
    <view class="timeline-promo-section container my-2">
      <text class="section-title text-center">
        <text class="title-icon">◈</text>
        赣傩文化发展历程
      </text>
      
      <view class="timeline-promo-card animate__animated animate__pulse animate__infinite" @tap="navigateToTimeline">
        <image 
          :src="url('c', 4, 'jpg')" 
          mode="aspectFill" 
          class="timeline-promo-image"
        />
        <view class="timeline-promo-content">
          <view class="timeline-years">
            <text class="year">唐代</text>
            <text class="arrow">→</text>
            <text class="year">宋代</text>
            <text class="arrow">→</text>
            <text class="year">近代</text>
          </view>
          <text class="timeline-promo-title">探索赣傩文化的历史足迹</text>
          <text class="timeline-promo-desc">从唐代起源到当代传承，了解赣傩文化的发展历程</text>
          <button class="timeline-promo-btn" type="warn">
            <text class="bi bi-clock-history"></text> 查看完整历史
          </button>
        </view>
        <view class="timeline-promo-overlay"></view>
      </view>
    </view>

    <view class="culture-container">  
      
    </view>

    <!-- 添加傩舞介绍跳转区域 -->
    <view class="dance-promo-section">
      <text class="section-title text-center">
        <text class="title-icon">◈</text>
        探索傩舞魅力
      </text>
      <view class="promo-card animate__animated animate__pulse animate__infinite">
        <image 
          class="promo-image" 
          src="https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D2553140610%2C4249412098%26fm%3D220%26app%3D103%26f%3DJPEG%3Fw%3D1791%26h%3D1008&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f352,234&n=0&g=0n&q=100?sec=1741680632&t=67db46f441d13ab7d9f0fa856394144c" 
          mode="aspectFill"
        />
        <view class="promo-content">
          <text class="promo-title">傩舞起百病消</text>
          <text class="promo-desc">探索传统傩舞文化，感受非遗魅力</text>
          <button 
            class="promo-btn" 
            type="warn"
            @tap="navigateToDance"
          >
            <text class="bi bi-play-circle"></text> 立即观看
          </button>
        </view>
        <view class="promo-overlay"></view>
      </view>
    </view>

    <!-- 图片预览弹窗 -->
    <uni-popup ref="previewPopup" type="center" background-color="rgba(0, 0, 0, 0.7)">
      <view class="image-preview" @tap="closePreview">
        <image 
          :src="url('c', currentPreviewImage, 'jpg')" 
          mode="aspectFit"
          class="preview-image animate__animated animate__zoomIn"
        />
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import cultureCard from '@/pages/other/dance/index.vue';
const url=$url
// 主分类
const categories = [
  { label: '傩舞精神', value: 'nuodance' },
  { label: '民俗活动', value: 'folklore' },
  { label: '实物遗产', value: 'heritage' }
];
const current = ref(0);
const mode = ref("dot");
// 添加激活分类索引
const activeCategoryIndex = ref(0);
const activeCategory = ref(categories[0].value);
const change=()=>{
  console.log();
  
}
// 处理分类切换
const onCategoryChange = (e) => {
  activeCategoryIndex.value = e.currentIndex;
  activeCategory.value = categories[e.currentIndex].value;
};

// 地区选项
const regionOptions = [
  { value: 'all', text: '全部地区' },
  { value: 'shangrao', text: '上饶' },
  { value: 'nanchang', text: '南昌' },
  { value: 'jiujiang', text: '九江' },
  { value: 'fuzhou', text: '抚州' },
  { value: 'yichun', text: '宜春' },
  { value: 'ganzhou', text: '赣州' },
  { value: 'jian', text: '吉安' },
  { value: 'pingxiang', text: '萍乡' },
  { value: 'xinyu', text: '新余' },
  { value: 'jingdezhen', text: '景德镇' }
];

// 年代选项
const periodOptions = [
  { value: 'all', text: '全部年代' },
  { value: 'pre-qin', text: '先秦时期' },
  { value: 'han', text: '汉代' },
  { value: 'tang', text: '唐代' },
  { value: 'song', text: '宋代' },
  { value: 'yuan', text: '元代' },
  { value: 'ming', text: '明代' },
  { value: 'qing', text: '清代' },
  { value: 'modern', text: '近代' },
  { value: 'contemporary', text: '当代' }
];

// 状态管理
const selectedRegion = ref('all');
const selectedPeriod = ref('all');
const sortBy = ref('latest');

// 排序选项
const sortOptions = [
  { value: 'latest', label: '最新' },
  { value: 'popular', label: '最热' },
  { value: 'recommended', label: '推荐' }
];
const culturalContent = ref([
  // 傩舞文化
  {
    id: 1,
    category: 'nuodance',
    title: '南昌傩舞《驱鬼》',
    description: '南昌地区的古老傩舞《驱鬼》，通过独特的面具和舞蹈动作，演绎了一场驱邪避灾的庄重仪式。这些面具色彩斑斓，形态各异，每一个都代表着不同的神灵或鬼怪。舞者们身着华丽的服饰，伴随着激昂的音乐和鼓点，跳起充满力量的舞蹈，展现出江西民间信仰与艺术的完美融合。这项传统活动不仅深受当地民众的喜爱，还吸引了众多游客前来观赏，成为南昌文化的一大亮点。',
    image: '0',
    region: '南昌',
    period: '明代',
    views: 1200,
    likes: 368,
    tags: ['驱邪', '面具', '传统']
  },
  {
    id: 2,
    category: 'nuodance',
    title: '上饶傩面制作',
    description: '上饶地区的傩面具制作技艺精湛，堪称一绝。从选材到雕刻、彩绘，每一道工序都凝聚着匠人的心血和智慧。这些面具不仅形态逼真，表情丰富，还蕴含着深厚的文化底蕴。它们不仅是傩舞表演中的重要道具，更是当地民间艺术的瑰宝。游客们可以通过参观制作过程，了解傩文化的历史和内涵。',
    image: '1',
    region: '上饶',
    period: '清代',
    views: 890,
    likes: 245,
    tags: ['工艺', '非遗', '手工']
  },
  {
    id: 3,
    category: 'nuodance',
    title: '九江《傩神迎春》',
    description: '九江地区的《傩神迎春》活动，是春节期间的重要民俗活动。舞者们身着五彩斑斓的服饰，佩戴神秘的面具，手持各种道具，跳起欢快的傩舞。他们的动作协调一致，充满韵律感，仿佛在向神灵祈求来年的丰收和平安。活动现场热闹非凡，吸引了众多市民和游客前来观看。',
    image: '2',
    region: '九江',
    period: '宋代',
    views: 1500,
    likes: 420,
    tags: ['节庆', '祭祀', '民俗']
  },
  // 民俗风情
  {
    id: 4,
    category: 'folklore',
    title: '吉安傩庙巡游',
    description: '吉安地区的傩庙巡游是每年一度的盛事。村民们自发组织起来，抬着傩神像，沿着村庄的道路巡游。他们身着传统服饰，手持各种乐器和道具，边走边演，祈求神灵保佑全村平安、风调雨顺。这项活动不仅展现了浓郁的乡土气息和民间信仰，还促进了村民之间的交流和团结。',
    image: '3',
    region: '吉安',
    period: '明代',
    views: 2100,
    likes: 678,
    tags: ['巡游', '傩庙', '民俗']
  },
  {
    id: 5,
    category: 'folklore',
    title: '赣州傩戏表演',
    description: '赣州地区的傩戏表演融合了戏曲、舞蹈、音乐等多种艺术形式，堪称一场视听盛宴。演员们身着传统服饰，头戴精致的面具，通过精湛的演技和生动的表情，演绎着古老的故事。这些故事不仅具有教育意义，还展现了江西傩文化的独特魅力和深厚底蕴。',
    image: '4',
    region: '赣州',
    period: '清代',
    views: 1680,
    likes: 520,
    tags: ['傩戏', '表演', '文化']
  },
  {
    id: 6,
    category: 'folklore',
    title: '赣南傩舞传承',
    description: '赣南地区的傩舞传承历史悠久，是当地民众文化生活中的重要组成部分。通过代代相传的方式，这里保留了大量珍贵的傩舞剧目和表演技艺。这些剧目和技艺不仅具有艺术价值，还承载着当地民众的文化记忆和情感认同。如今，越来越多的年轻人开始关注和参与傩舞的传承和发展。',
    image: '5',
    region: '赣州',
    period: '近代',
    views: 960,
    likes: 288,
    tags: ['传承', '傩舞', '民间']
  },
  // 文化遗产
  {
    id: 7,
    category: 'heritage',
    title: '九江傩舞',
    description: '九江傩舞作为江西傩文化的重要组成部分，以其独特的表演形式和丰富的文化内涵而闻名。舞者们通过生动的舞蹈动作和面具表情，讲述着古老的故事和传说。这些故事不仅具有历史价值，还蕴含着深刻的人生哲理。九江傩舞不仅深受当地民众的喜爱，还成为了研究江西民间艺术和历史文化的重要窗口。',
    image: '6',
    region: '九江',
    period: '宋代',
    views: 3200,
    likes: 890,
    tags: ['傩舞', '文化遗产', '历史']
  },
  {
    id: 8,
    category: 'heritage',
    title: '抚州傩面具艺术',
    description: '抚州地区的傩面具艺术以其精湛的雕刻技艺和独特的艺术风格而著称。这些面具不仅形态各异，表情丰富，还蕴含着深厚的文化底蕴和艺术价值。每一件作品都是匠人心血的结晶，展现了他们对美的追求和对传统文化的热爱。如今，抚州傩面具艺术已经成为当地的一张名片，吸引了众多游客前来观赏和收藏。',
    image: '7',
    region: '抚州',
    period: '明代',
    views: 780,
    likes: 235,
    tags: ['傩面具', '艺术', '非遗']
  },
  {
    id: 9,
    category: 'heritage',
    title: '宜春傩庙建筑',
    description: '宜春地区的傩庙建筑以其独特的风格和深厚的文化底蕴而吸引了众多游客的目光。这些建筑不仅结构精巧，装饰华丽，还蕴含着丰富的历史信息和文化内涵。它们不仅是研究江西傩文化的重要实物资料，也是当地民众的精神寄托和文化象征。游客们可以通过参观这些建筑，了解傩文化的历史和传承。',
    image: '8',
    region: '宜春',
    period: '唐代',
    views: 1450,
    likes: 467,
    tags: ['傩庙', '建筑', '文化']
  },
  {
    id: 10,
    category: 'nuodance',
    title: '抚州傩舞面具雕刻',
    description: '抚州地区的傩舞面具雕刻技艺精湛，堪称一绝。匠人们通过巧妙的构思和精湛的技艺，将一个个生动的面具呈现在世人面前。这些面具不仅形态逼真，表情丰富，还蕴含着深厚的文化内涵和艺术价值。它们是傩舞表演中的重要道具，也是当地民间艺术的瑰宝。游客们可以通过参观雕刻过程，感受傩文化的独特魅力。',
    image: '9',
    region: '抚州',
    period: '清代',
    views: 920,
    likes: 310,
    tags: ['雕刻', '傩面具', '工艺']
  },
  {
    id: 11,
    category: 'folklore',
    title: '萍乡傩戏传承',
    description: '萍乡地区的傩戏传承历史悠久，是当地文化的重要组成部分。通过代代相传的方式，这里保留了大量珍贵的傩戏剧目和表演技艺。这些剧目和技艺不仅具有艺术价值，还承载着当地民众的文化记忆和情感认同。如今，越来越多的年轻人开始关注和参与傩戏的传承和发展，为这一古老艺术形式注入了新的活力。',
    image: '10',
    region: '萍乡',
    period: '近代',
    views: 850,
    likes: 276,
    tags: ['传承', '傩戏', '艺术']
  },
  {
    id: 12,
    category: 'heritage',
    title: '瑞金傩舞文物',
    description: '瑞金地区保存了大量珍贵的傩舞文物和非遗传承，是研究江西傩文化的重要实物资料和活态传承。这些文物不仅展示了傩舞的历史演变和表演形式，还蕴含着丰富的文化内涵和艺术价值。通过参观这些文物，游客们可以深入了解傩文化的历史和传承，感受这一古老艺术形式的独特魅力。',
    image: '11',
    region: '瑞金',
    period: '近代',
    views: 2800,
    likes: 920,
    tags: ['文物', '傩舞', '文化']
  }
]);
const culturalItems = [
  {
    title: "傩面具艺术",
    description:
      "传统手工制作工艺的精湛展现，每一个面具都蕴含着独特的文化内涵和艺术价值。",
  },
  {
    title: "傩舞表演",
    description:
      "源远流长的民间舞蹈艺术，通过肢体动作和面具表情传递神秘的文化信息。",
  },
  {
    title: "祭祀仪式",
    description: "古老的傩祭活动，展现了人与神灵沟通的庄重仪式感和文化传承。",
  }
];

// 筛选后的内容
const filteredContent = computed(() => {
  // 分类筛选
  const categoryMatch = culturalContent.value.filter(item => item.category === categories[activeCategoryIndex.value].value);
  // 地区筛选
  const regionMatch = selectedRegion.value === 'all' || categoryMatch.some(item => item.region === selectedRegion.value);
  // 年代筛选
  const periodMatch = selectedPeriod.value === 'all' || categoryMatch.some(item => item.period === selectedPeriod.value);
  
  return categoryMatch.filter(item => {
    // 地区筛选
    const regionMatch = selectedRegion.value === 'all' || item.region === selectedRegion.value;
    // 年代筛选
    const periodMatch = selectedPeriod.value === 'all' || item.period === selectedPeriod.value;
    
    return regionMatch && periodMatch;
  }).sort((a, b) => {
    // 排序逻辑
    switch (sortBy.value) {
      case 'popular':
        return b.views - a.views;
      case 'recommended':
        return b.likes - a.likes;
      case 'latest':
      default:
        return b.id - a.id;
    }
  });
});

// 筛选变化处理
watch([selectedRegion, selectedPeriod, sortBy], () => {
  // 可以在这里添加额外的处理逻辑，比如记录用户筛选习惯等
  console.log('筛选条件变化:', {
    region: selectedRegion.value,
    period: selectedPeriod.value,
    sort: sortBy.value
  });
});

// 添加时间线跳转方法
const navigateToTimeline = () => {
  uni.navigateTo({
    url: '/pages/other/time/index'
  })
}

// 图片预览相关状态
const isPreviewVisible = ref(false);
const currentPreviewImage = ref('');

// 打开图片预览
const previewPopup = ref(null);

const openImagePreview = (image) => {
  currentPreviewImage.value = image;
  previewPopup.value.open();
};

const closePreview = () => {
  previewPopup.value.close();
};

// 添加跳转方法
const navigateToDance = () => {
  uni.navigateTo({
    url: '/pages/other/dance/index'
  })
}
</script>

<style lang="scss" scoped>
/* 修复滚动条问题 */
.culture-container {
  width: 100%;
  overflow-x: hidden; // 防止水平滚动
}

.hero-section {
  position: relative;
  width: 100%;
  height: 40vh; // 设置固定高度
  min-height: 300px;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 确保内容区域不会超出容器 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 修复卡片布局 */
.content-section {
  .row {
    margin: 0 -15px;
    display: flex;
    flex-wrap: wrap;
  }

  .col-md-6,
  .col-lg-4 {
    padding: 0 15px;
    box-sizing: border-box;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-section {
    height: 30vh;
    min-height: 200px;
  }

  .hero-text {
    .hero-title {
      font-size: 24px;
    }
    .hero-subtitle {
      font-size: 16px;
    }
  }

  .col-md-6,
  .col-lg-4 {
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .col-md-6 {
    width: 50%;
  }
}

@media (min-width: 1025px) {
  .col-lg-4 {
    width: 33.333333%;
  }
}

.hero-text {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.filter-section {
  background: white;
  padding: 1.5rem;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.culture-card {
  transition: transform 0.3s;
}

.culture-card:hover {
  transform: translateY(-5px);
}

.meta-info {
  display: flex;
  gap: 1rem;

  color: #666;

}

.meta-info span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-text {
    left: 1rem;
    bottom: 1rem;
  }

  .sub-filters {
    flex-direction: column;
    gap: 1rem;
  }
}

.heritage-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 1rem;
}

.heritage-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.heritage-footer {
  border-top: 1px solid #eee;
  padding-top: 1rem;
  text-align: right;
}

.card {
  overflow: hidden;
}

.card:hover .ratio {
  transform: scale(1.05);
}

.card .ratio {
  transition: transform 0.3s ease;
}



.timeline-section {
  padding: 4rem 0;
  background: #f8f9fa;
}

.timeline {
  position: relative;
  padding: 2rem 0;
}
.culture-showcase {
  .swiper-box {
    height: 400rpx;
  }

  .swiper-item {
    position: relative;
    height: 100%;
  }

  .swiper-img {
    width: 100%;
    height: 100%;

  }

  .swiper-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40rpx;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;


    .swiper-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      display: block;
    }

    .swiper-desc {
      font-size: 28rpx;
      opacity: 0.9;
      display: block;
    }
  }
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: #e9ecef;
}

.timeline-item {
  position: relative;
  margin-bottom: 4rem;
}

.timeline-badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all 0.5s ease;
}

.timeline-badge.active {
  border-color: var(--td-brand-color-8);
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.year {
  font-size: 1rem;
  font-weight: bold;
  color: #666;
}

.timeline-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-card:hover {
  transform: translateY(-5px);
}

.image-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

/* 优化移动端样式 */
@media (max-width: 768px) {
  .timeline-content {
    width: calc(100% - 80px);
    margin-left: 80px !important;
  }

  .timeline-card {
    max-width: 300px;
    margin: 0 auto;
  }

  .preview-image {
    max-height: 60vh;
  }
}

/* 标签样式优化 */
.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 修改时间线响应式样式 */
@media (max-width: 768px) {
  .timeline::before {
    left: 30px; /* 调整时间线位置 */
  }

  .timeline-badge {
    left: 30px; /* 与时间线对齐 */
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
  }

  .timeline-content {
    width: calc(100% - 60px) !important; /* 统一宽度 */
    margin-left: 60px !important; /* 统一左边距 */
    padding-left: 20px !important; /* 统一内边距 */
    padding-right: 15px !important;
  }

  /* 重置所有卡片的文本对齐方式 */
  .timeline-item:nth-child(even) .timeline-content,
  .timeline-item:nth-child(odd) .timeline-content {
    margin-right: 0;
    margin-left: 60px !important;
    padding-left: 20px !important;
    padding-right: 15px !important;
    text-align: left;
  }

  /* 调整卡片大小和位置 */
  .timeline-card {
    max-width: 100%;
    margin: 0;
  }

  /* 调整年份标记大小 */
  .year {
    font-size: 0.9rem;
  }

  /* 优化标签布局 */
  .timeline-tags {
    justify-content: flex-start;
  }
}

/* 添加平板尺寸的优化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .timeline-content {
    width: 44%;
  }

  .timeline-item:nth-child(odd) .timeline-content {
    padding-left: 2rem;
  }

  .timeline-item:nth-child(even) .timeline-content {
    padding-right: 2rem;
  }
}

/* 确保动画效果在小屏幕下也正常工作 */
@media (max-width: 768px) {
  .timeline-content.active {
    opacity: 1;
    transform: translateX(0);
  }

  .timeline-item:nth-child(odd) .timeline-content.active,
  .timeline-item:nth-child(even) .timeline-content.active {
    animation-name: fadeInLeft;
  }
}

// 统一标题样式

/* 筛选区域样式 */
.filter-section {
  background: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.sub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  align-items: center;
}

.filter-group {
  display: flex;
  gap: 20rpx;
  flex: 1;
  min-width: 300rpx;
}

.sort-group {
  display: flex;
  gap: 10rpx;
}

// 适配移动端
@media (max-width: 768px) {
  .sub-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-group {
    flex-direction: column;
  }
  
  .sort-group {
    justify-content: center;
  }
}

// 添加傩舞介绍区域样式
.dance-promo-section {
  padding: 40rpx;
  margin: 20rpx 0;
}

.promo-card {
  position: relative;
  width: 100%;
  height: 400rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  cursor: pointer;
  
  &:active {
    transform: scale(0.98);
  }
}

.promo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
}

.promo-content {
  position: absolute;
  left: 40rpx;
  bottom: 40rpx;
  right: 40rpx;
  z-index: 1;
  color: #fff;
}

.promo-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.promo-desc {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 30rpx;
  display: block;
}

.promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10rpx;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  background: var(--td-brand-color);
  color: #fff;
  font-size: 28rpx;
  border: none;
  
  .bi {
    font-size: 32rpx;
  }
  
  &:active {
    opacity: 0.9;
  }
}

// 添加动画相关样式
.animate__animated {
  animation-duration: 2s;
  animation-delay: 1s;
}

// 添加时间线跳转卡片样式
.timeline-promo-section {
  padding: 40rpx;
  margin: 20rpx 0;
}

.timeline-promo-card {
  position: relative;
  width: 100%;
  height: 400rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  cursor: pointer;
  
  &:active {
    transform: scale(0.98);
  }
}

.timeline-promo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-promo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
}

.timeline-promo-content {
  position: absolute;
  left: 40rpx;
  bottom: 40rpx;
  right: 40rpx;
  z-index: 1;
  color: #fff;
}

.timeline-years {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .year {
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .arrow {
    color: var(--td-brand-color);
    font-size: 24rpx;
  }
}

.timeline-promo-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.timeline-promo-desc {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 30rpx;
  display: block;
}

.timeline-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10rpx;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  background: var(--td-brand-color);
  color: #fff;
  font-size: 28rpx;
  border: none;
  
  .bi {
    font-size: 32rpx;
  }
  
  &:active {
    opacity: 0.9;
  }
}
</style> 